<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0">
    <title>父子组件使用</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
  
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .tabbarWrap{
                width: 100%;
                height: 64px;
                border-top: 1px solid #999;
                position: fixed;
                left: 0;
                bottom: 0;
            }
            .itemWrap{
                width: 20%;
                float: left;
                text-align: center;
            }
            .itemWrap img{
                width: 45px;
            }
            .itemWrap span{
                font-size: 14px;
                color: #333;
            }
    
        </style>
</head>
<body>
  <div id="app">
      <tabbar></tabbar>
  </div>

  <!-- 父组件模板 -->
  <template id="parent">
    <div class="tabbarWrap">
        <item src="img/ai-home.png" txt="首页"></item>
        <item src="img/gouwuche.png" txt="搜索"></item>
        <item src="img/gouwuche_1.png" txt="热点"></item>
        <item src="img/gouwuche_2.png" txt="购物车"></item>
        <item src="img/gouwuche_3.png" txt="我的"></item>
    </div>
  </template>
  <!-- 子组件模板 -->
<template id="son">
<div class="itemWrap">
<img :src="src">
<br/>
<span>{{txt}}</span>
</div>
</template>
</body>

</html>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{

        },
        components:{
            //父组件
            "tabbar":{
                template:"#parent",
                //子组件
                components:{
                    "item":{
                        template:"#son",
                        props:["txt","src"]
                    }
                }
            }
        }
    })
</script>
